<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :background="{'background':'#fff'}" :isBack="true">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				优惠券
			</text>
		</base-nav-bar>
		<!-- 商家简介 -->
		<view :style="{'top':customBar+ 'px' }" class="course-add u-flex u-flex-items-center u-flex-between u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30">
			<view :class="couponStatus==0?'active':''" class="u-flex course-add-btn u-flex-center u-flex-items-center" @click="changeStatus(0)">
				<text class="course-add-txt">未开始</text>
			</view>
			<view :class="couponStatus==1?'active':''" class="u-flex course-add-btn u-flex-center u-flex-items-center" @click="changeStatus(1)">
				<text class="course-add-txt">进行中</text>
			</view>
			<view :class="couponStatus==2?'active':''" class="u-flex course-add-btn u-flex-center u-flex-items-center" @click="changeStatus(2)">
				<text class="course-add-txt">已结束</text>
			</view>
		</view>
		<view v-if="!isEmpty" class="content-box" style="margin-top: 120rpx;">
			<view v-for="(item,index) in courseList" :key="index" class="u-flex u-flex-column u-flex-between merchant-box u-m-l-30 u-m-r-30 u-m-b-20" @click="jump('/pages-merchant/coupon/couponDetail?id='+item.id)">
				<view class="course-item u-flex u-flex-between u-flex-items-center">
					<view class="u-flex u-flex-start u-flex-items-center u-flex-3">
						<view :class="couponStatus==2?'out-time':''" class="merchant-logo">
							<view :class="couponStatus==2?'out-time-palmate':''" class="coupon-top">
								全平台通用
							</view>
							<view class="coupon-money">
								<text class="u-font-26 coupon-unit">¥</text>
								{{ item.number }}
							</view>
							<view class="coupon-rule">
								满{{ item.money }}可用
							</view>
						</view>
						<view class="u-flex u-flex-items-start u-flex-column u-flex-between u-m-l-20 u-p-b-20 u-p-r-20 u-p-t-20" style="height: 180rpx;">
							<view class="course-item-text">{{ item.name }}</view>
							<view class="course-item-number">
								<text>有效期至</text>
								{{ item.endtime }}
							</view>
							<view class="course-item-number u-flex u-flex-start u-flex-items-center">
								<text style="margin-right: 6rpx">使用说明</text>
								<u-icon color="#9A9A9A" name="arrow-down" size="12"></u-icon>
							</view>
						</view>
					</view>
					<view v-if="couponStatus==0" class="course-item-btn-group u-flex u-flex-1 u-flex-column u-flex-around u-p-t-20 u-p-b-20">
						<view class="course-item-btn edit" @click="editCoupon(item.id)">编辑</view>
						<view class="course-item-btn delete" @click="deleteCoupon(item.id)">删除</view>
					</view>
					<view v-if="couponStatus==1" class="course-item-btn-group u-flex u-flex-1 u-flex-column u-flex-center u-flex-items-center u-p-t-20 u-p-b-20">
						<image src="/static/images/merchant/coupon/jinxingzhong.png" style="width: 140rpx;height: 140rpx;border-radius: 50%"></image>
					</view>
					<view v-if="couponStatus==2" class="course-item-btn-group u-flex u-flex-1 u-flex-column u-flex-around u-flex-items-center u-p-t-20 u-p-b-20">
						<image src="/static/images/merchant/coupon/yijieshu.png" style="width: 140rpx;height: 140rpx;border-radius: 50%"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty
			v-if="isEmpty"
			:marginTop="220"
			mode="data"
			text="暂无优惠券记录"
		>
		</u-empty>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" :status="loadStatus" color="#ccc" height="80rpx" icon-type="flower"/>
	</view>
</template>

<script>
let systemInfo     = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo     = uni.getMenuButtonBoundingClientRect();
// #endif
import {mapGetters} from 'vuex';
import {HTTP_IMG_URL} from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			courseList  : [
			],
			loadStatus  : 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage : 1,
			lastPage    : 1,
			total       : '',
			isEmpty     : false,
			couponStatus: 0
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight", statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		if (!this.isLogin) {
		
		}
		
	},
	onHide() {
	},
	onLoad() {
		this.courseList  = [];
		this.currentPage = 1;
		this.getMourserList()
	},
	created() {
		// 触底监听
		uni.$on('uOnReachBottom', data => {
			if (this.loadStatus == 'loadmore') {
				this.currentPage += 1;
				this.getMourserList();
			}
		});
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url  : path,
				query: parmas
			});
		},
		// 消费列表
		getMourserList() {
			let that = this;
			that.$Api.merchant.couponList({
				page    : that.currentPage,
				pageSize: 20,
				status  : this.couponStatus
			}).then(res => {
				that.courseList = [...that.courseList, ...res.data.data];
				that.isEmpty    = !that.courseList.length;
				that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
			});
		},
		changeStatus(type) {
			this.couponStatus = type
			this.courseList   = [];
			this.currentPage  = 1;
			this.getMourserList()
		},
		deleteCoupon(id) {
			var that = this;
			that.$Api.merchant.couponDelete({id: id}).then(res => {
				if (res.code == 1) {
					uni.$u.toast('删除成功')
					this.courseList  = [];
					this.currentPage = 1;
					this.getMourserList()
				}
			}).catch(err => {
				console.log(e)
			})
		},
		editCoupon(id) {
			this.jump('/pages-merchant/coupon/couponAdd?id=' + id);
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}

.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	
	.swipers {
		width: 100%;
	}
}

.nickname {
	font-size: 34rpx;
	font-weight: bold;
}

.course-add {
	position: fixed;
	background: #F6F6F8;
	z-index: 1000;
	width: calc(100% - 60rpx);
	
	.course-add-btn {
		padding: 20rpx 60rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 100px;
		
		.course-add-txt {
			color: #000000;
			font-size: 30rpx;
		}
	}
	
	.active {
		background: #30AA4D;
		
		.course-add-txt {
			color: #fff;
		}
	}
}

.content-box {
	.merchant-box {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #FFFFFF 100%);
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1), inset 0px 1px 0px 0px #FFFFFF;
		border-radius: 30rpx;
		min-height: 12vh;
		position: relative;
		overflow: hidden;
		
		.course-item {
			width: 100%;
			
			.merchant-logo {
				width: 140rpx;
				height: 200rpx;
				background: #fdf8f8;
				
				.coupon-top {
					font-weight: 400;
					font-size: 12px;
					color: #FF1E00;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-style: normal;
					padding: 10rpx 0;
					background: linear-gradient(90deg, #FFE2E2 0%, #FFF3F3 100%);
					border-radius: 14px 0px 0px 0px;
				}
				
				.coupon-money {
					font-weight: bold;
					font-size: 26px;
					color: #FF1E00;
					line-height: 39px;
					text-align: center;
					font-style: normal;
					margin-top: 12rpx;
					.coupon-unit {
						font-weight: bold;
						font-size: 16px;
						color: #FF1E00;
						line-height: 24px;
						text-align: center;
						font-style: normal;
					}
				}
				
				.coupon-rule {
					font-weight: 400;
					font-size: 12px;
					color: #FF1E00;
					line-height: 21px;
					text-align: center;
					font-style: normal;
					margin-bottom: 20rpx;
				}
			}
			
			.out-time {
				background: #ccc;
				color: #fff;
				
				.out-time-palmate {
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
					border-radius: 14px 0px 0px 0px;
					color: #fff;
				}
				
				.coupon-rule, .coupon-money, .coupon-money > .coupon-unit {
					color: #fff;
				}
			}
			
			.merchant-icon {
				width: 30rpx;
				height: 30rpx;
			}
			
			.course-item-text {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
			
			.course-item-number {
				font-weight: 400;
				font-size: 13px;
				color: #565656;
				line-height: 22px;
				text-align: left;
				font-style: normal;
			}
			
			.course-item-btn-group {
				.course-item-btn {
					width: 66px;
					height: 34px;
					border-radius: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				
				.edit {
					background: linear-gradient(270deg, #30AA4D 0%, #20CE83 100%);
					box-shadow: 0px 2px 4px 0px rgba(48, 170, 77, 0.3);
				}
				
				.delete {
					margin-top: 20rpx;
					background: linear-gradient(270deg, #FE4369 0%, #FE746D 100%);
					box-shadow: 0px 2px 4px 0px rgba(254, 70, 105, 0.3);
				}
			}
		}
		
	}
}
</style>
